<template>
	<div>
		<card :header='{title:insol.loginname}' :footer='{title:insol.create_at}'>
			<div slot='content' class="app">
				<p>
					<img :src="insol.avatar_url" alt="">
				</p>
				<p>
					用户积分：{{insol.score}}
				</p>
				<p>
					<a :href="'/#/user/'+insol.loginname+'/colloctions'">{{collct_topics.length}}个话题收藏</a>
				</p>
				<p>
					<a :href="'https://github.com/'+insol.githubUsername">
						@{{insol.githubUsername}}
					</a>
				</p>
				<p>
					<a href='http://zhaoyanjiao.top/'>
						个人博客
					</a>
				</p>
			</div>
		</card>
		<card :header="{title:'最近创建的话题'}">
			<group slot='content' v-if='insol.recent_topics.length>0'>
				<cell v-for='(i,index) in insol.recent_topics' :key='index' :title='i.title' is-link :link="'/topic/'+i.id">
					<!-- 头像 -->
					<span slot='icon' class="sl">
						<img :src="i.author.avatar_url" alt="">
					</span>
				</cell>
			</group>
			<group  v-else>
				<cell slot='content' title='无话题'></cell>
			</group>
		</card>
		<card :header="{title:'参与的话题'}">
			<group slot='content' v-if='insol.recent_replies.length>0'>
				<cell v-for='(i,index) in insol.recent_replies' :key='index' :title='i.title' is-link :link="'/topic/'+i.id">
					<!-- 头像 -->
					<span slot='icon' class="sl">
						<img :src="i.author.avatar_url" alt="">
					</span>
				</cell>
			</group>
			<group  v-else>
				<cell slot='content' title='无话题'></cell>
			</group>
		</card>
	</div>
</template>

<script>
	import {
		Card,
		Group,
		Cell
	} from 'vux';
	export default {
		props: ['loginname'], //接收传递的参数
		data: function() {
			return {
				insol: {
					recent_replies:[],
					recent_topics:[]
				}, //拿到ajax中的数据
				collct_topics:[],//话题收藏
				
			}
		},
		components:{
			Card,
			Group,
			Cell
		},
		//导航守卫
		beforeRouteEnter: function(to, from, next) {
			//进入路由之前，this不指代当前组件对象
			next(function(vm) {
				vm.$http.get('/user/' + to.params.loginname).then(function(res) {
					vm.insol = res.data.data;
					console.log(res.data);
				});
				//获取用户收藏的主题信息
				vm.$http.get('/topic_collect/'+to.params.loginname).then(function(res){
					vm.collct_topics=res.data.data;
				})
			})
		},
		//导航守卫改变时
		beforeRouteUpdate: function(to, from, next) {
			var app = this;
			this.$http.get('/user/' + to.params.loginname).then(function(res) {
				app.insol = res.data.data;
			});
			//获取用户收藏的主题信息
			app.$http.get('/topic_collect/'+to.params.loginname).then(function(res){
				app.collct_topics=res.data.data;
			});
			next();
		}

	}
</script>

<style scoped>
	.app p{
		padding: 10px 0 20px 0;
	}
	.sl img{
		width: 30px;
		height: 30px;
	}
</style>
